<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <title>DAOBI_DOC</title>
</head>
<style>
  html,
  body {
    background: #e5e5e5 url('');
    color: #636b6f;
    font-family: "Nunito", sans-serif;
    font-weight: 100;
    height: 100vh;
    margin: 0;
  }

  .app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  section {
    cursor: pointer;
    display: flex;
    margin: 15px;
  }

  section:hover {
    color: #f56c6c;
  }

  .code {
    border-right: 2px solid;
    font-size: 26px;
    padding: 0 15px 0 15px;
    text-align: end;
    width: 300px;
  }

  .message {
    font-size: 18px;
    line-height: 15px;
    padding: 12px;
    width: 300px;
  }

  .tips-container {
    position: absolute;
    top: 10%;
    left: 10%;
    z-index: 100;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666;
    text-align: center;
  }

  .daobi-cursor {
    font-size: 22px;
    animation: blink .8s infinite steps(1, start)
  }

  @keyframes blink {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
</style>

<body>
  <div class="tips-container">
    <span>/**</span>
    <span id="tips"></span>
    <span class="daobi-cursor">|</span>
    <span>*/</span>
  </div>
  <div class="app">
    <section onclick="routerLink('12346')">
      <div class="code">
        搭建、规范
      </div>
      <div class="message">
        introduce_doc
      </div>
    </section>
    <section onclick="routerLink('12347')">
      <div class="code">
        用户中心
      </div>
      <div class="message">
        ucenter_doc
      </div>
    </section>
    <section onclick="routerLink('12348')">
      <div class="code">
        效率应用
      </div>
      <div class="message">
        light_weight_doc
      </div>
    </section>
    <section onclick="routerLink('12349')">
      <div class="code">
        规划表
      </div>
      <div class="message">
        dissertation_doc
      </div>
    </section>
    <section onclick="routerLink('12350')">
      <div class="code">
        动态路由
      </div>
      <div class="message">
        dynamic-router
      </div>
    </section>
  </div>
</body>
<script>
  let protocol = window.location.protocol;
  let hostname = window.location.hostname;
  function routerLink(port) {
    let _url = protocol + "//" + hostname + ":" + port + '?ts=' + Date.now();
    window.open(_url, "_blank")
  }

  const depository = [
    "导毕项目交接文档              ",
    "项目搭建、用户中心、效率应用              ",
    "架构设计、开发规范、具体案例使用讲解              ",
    "Yarn、Webpack、Git...              ",
  ]
  let _dom = document.getElementById("tips");
  let currentIndex = 0;
  let contentIndex = 0;
  let intervalId = null;
  function subtitles() {
    const contents = depository[currentIndex];
    if (contentIndex < contents.length) {
      _dom.innerHTML = getContent(contents);
      contentIndex++
    } else dispatch()
  }

  function getContent(content) {
    return content.substr(0, contentIndex + 1)
  }
  function autoStart(func, time = 130) {
    intervalId = setInterval(() => func(), time);
  }

  function dispatch() {
    clearInterval(intervalId)
    autoStart(decline, 50)
  }
  function decline() {
    const contents = depository[currentIndex];
    _dom.innerHTML = getDeContent(contents);
  }
  function getDeContent(content, len) {
    if (contentIndex === 0) {
      const allLen = depository.length - 1;
      if (currentIndex < allLen) currentIndex += 1
      else currentIndex = 0;
      clearInterval(intervalId)
      autoStart(subtitles)
      return ""
    }
    contentIndex--
    return content.substr(0, contentIndex)
  }

  autoStart(subtitles)

</script>

</html>